<template>
  <el-row>
    <el-col :span="24">
      <el-input v-model="search" placeholder="输入 Block Hash" @change="onSearch"></el-input>
    </el-col>
  </el-row>
  <h2>Block: {{ block }}</h2>
  <el-table :data="blockTableData" style="width: 100%" :show-header="false">
    <el-table-column prop="label" label="Label" />
    <el-table-column prop="value" label="Value" />
  </el-table>
  <h2>Block Transactions</h2>
  <el-table :data="PageData" style="width: 100%" :show-header="false">
    <el-table-column label="Title">
      <template #default>
        <div>Hash</div>
      </template>
    </el-table-column>
    <el-table-column prop="hash" label="Hash" />
    <el-table-column label="Date">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ moment(scope.row.time * 1000).format('yyyy-MM-DD HH:mm:ss') }}</span>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <br />
  <el-pagination
    background
    v-model:currentPage="currentPage"
    v-model:page-size="pageSize"
    layout="prev, pager, next"
    :total="total"
    :pager-count="7"
    small
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getTableData } from '@/api/index';
import moment from 'moment';

const search = ref('');
const block = ref('');
const blockTableData = ref([]);
const transactionsData = ref([]);
const PageData = ref([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(5);

// 格式化百位数
const _toThousands = (num = 0) => {
  return num.toString().replace(/\d+/, function (n) {
    return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
  });
};

// 搜索
const onSearch = (val) => {
  window.location.href = `/${val}`;
};

// pagesize回调
const handleSizeChange = (val) => {
  pageSize.value = val;
  getPageData(currentPage.value, val);
};

// 分页回调
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getPageData(val, pageSize.value);
};

// 前端分页
const getPageData = (page = currentPage.value, size = pageSize.value) => {
  PageData.value = transactionsData.value.slice((page - 1) * size, page * size);
};

// 获取接口数据
const getList = async (hash) => {
  try {
    const res = await getTableData(hash);
    block.value = res.block_index;
    blockTableData.value = [
      {
        label: 'Hash',
        value: res.hash,
      },
      {
        label: 'Timestamp',
        value: moment(res.time * 1000).format('YYYY-MM-DD HH:mm:ss'),
      },
      {
        label: 'Height',
        value: res.height,
      },
      {
        label: 'Number of Transactions',
        value: res.n_tx,
      },
      {
        label: 'Merkle root',
        value: res.mrkl_root,
      },
      {
        label: 'Weight',
        value: _toThousands(res.weight) + ' WU',
      },
      {
        label: 'Size',
        value: _toThousands(res.size) + ' bytes',
      },
      {
        label: 'Fee Reward',
        value: res.fee + ' BTC',
      },
    ];
    total.value = res.tx.length;
    transactionsData.value = res.tx;
    PageData.value = res.tx.slice(currentPage.value - 1, pageSize.value);
  } catch (error) {
    console.error(error);
  }
};

onMounted(async () => {
  const { pathname } = window.location;
  getList(pathname);
});
</script>
